<template>
  <view class="result-box">
    <view class="icon-box" v-if="isSuccess">
      <image
        :src="`${img_baseUrl}/statics/std/static/icon-success.png`"
        class="icon-result"
      ></image>
    </view>
    <view class="icon-box" v-if="!isSuccess">
      <image
        :src="`${img_baseUrl}/statics/std/static/icon-err.png`"
        class="icon-result"
      ></image>
    </view>
    <view class="tip">
      {{ isSuccess ? "下单成功" : "支付失败" }}
    </view>
    <view
      class="verify"
      v-if="isSuccess"
      @click="link(`/page_my/order/detail?id=${id}`, 'redirectTo')"
    >
      查看订单
    </view>
    <view class="verify" @click="getPayOrderInfo(id)" v-else> 重新支付 </view>
    <view
      class="black"
      v-if="!isSuccess"
      @click="link(`/page_my/order/detail?id=${id}`, 'redirectTo')"
    >
      查看订单
    </view>
    <view
      class="black"
      v-if="isSuccess"
      @click="link(`/pages/index/index`, 'switch')"
    >
      返回首页
    </view>
  </view>
</template>

<script>
import { requestGet } from "@/utils/request";

export default {
  props: {
    state: String,
    id: String | Number,
  },
  data() {
    return {
	  img_baseUrl: process.env.VUE_APP_BASEURL_IMG_API,
      isSuccess: this.state == 1,
    };
  },
  methods: {
    link(url, type) {
      if (type === "switch") {
        uni.switchTab({
          url: url,
		  success: (res) => {
			  console.log('跳转成功', res)
		  },
		  fail: (err) => {
			  console.log('跳转失败', err)
		  },
        });
        return;
      }
      if (type === "redirectTo") {
        uni.redirectTo({ url });
        return;
      }
      uni.navigateTo({ url });
    },
    // 支付前获取订单详细
    getPayOrderInfo(orderId) {
      if (this.isSubmitting) return;
      this.isSubmitting = true;
      return requestGet(`/pay/pay/transactions/shop/${orderId}`).then((res) => {
        if (res.code === 200) {
          //调用微信官方支付接口弹出付款界面,输入密码扣款
          wx.requestPayment({
            provider: "wxpay",
            timeStamp: String(res.data.timeStamp),
            nonceStr: res.data.nonceStr,
            package: res.data.package,
            signType: res.data.signType,
            paySign: res.data.paySign,
            success(res) {
              console.log("success:" + JSON.stringify(res));
              this.isSuccess = 1;
            },
            fail(err) {
              console.log("fail:" + JSON.stringify(err));
            },
          });
          this.isSubmitting = false;
        }
      });
    },
  },
};
</script>

<style lang="scss">
.result-box {
  .icon-box {
    width: 160rpx;
    height: 160rpx;
    margin: 98rpx auto 24rpx;
  }
  .icon-result {
    display: block;
    width: 100%;
    height: 100%;
  }
  .tip {
    font-size: 40rpx;
    font-weight: 700;
    color: rgba(0, 0, 0, 0.7);
    line-height: 56rpx;
    text-align: center;
    padding-bottom: 110rpx;
  }
  .verify {
    text-align: center;
    margin: 0 auto 32rpx;
    width: 510rpx;
    height: 88rpx;
    background: #3FAA73;
    border-radius: 44rpx 44rpx 44rpx 44rpx;
    font-size: 32rpx;
    font-weight: 500;
    color: #ffffff;
    line-height: 88rpx;
  }
  .black {
    text-align: center;
    margin: 0 auto;
    width: 510rpx;
    height: 88rpx;
    background: #f7f9fa;
    border-radius: 44rpx 44rpx 44rpx 44rpx;
    font-size: 32rpx;
    font-weight: 500;
    color: rgba(0, 0, 0, 0.8);
    line-height: 88rpx;
  }
}
</style>
